<template>
	<view class="buyersShow">
		<view class="show">
			<view class="list">
				<view class="show_list"  v-for="(item, index) in initData" :key="index">
					<view class="msg" @click="go_detail(item.id)">
						<image :src="item.image" ></image>
						<view>{{item.comment}}</view>
					</view>
					<view >
					<view class="img" v-if="item.img" >
						<scroll-view :scroll-left="left" scroll-x="true" class="scroll-X" @scroll="scroll" scroll-with-animation="true">
							<view v-for="(t, index) in item.img" :key="index" class="imgthumb"><image :src="t" mode="aspectFit"></image></view>
						</scroll-view>
						<view class="control">
							<view class="left" @click="go_left()"><uni-icons type="back" size="24" color="#fff" /></view>
							<view class="right" @click="go_right()"><uni-icons type="forward" size="24" color="#fff" /></view>
						</view>
					</view>
					</view>
					<view class="like">
						<view class="over" @click="go_good(item.goodsId)"> {{item.goodsName}}  </view>
						<image src="/static/img/like2.png" @click="like(item)" v-if="item.isPraise==0"/>
						<image src="/static/img/like3.png" @click="like(item)" v-if="item.isPraise==1"/>
						{{item.praiseCount}}
					</view>
				</view>
			</view>
			<view v-show="initData.length==0" class="notavailable">
				<image src="../../static/img/notavailable.png" mode="widthFix"></image>
				<view class="nottext">暂时没有数据</view>
			</view>
		</view>
	</view>
</template>
<script>
import { uniIcons } from '@dcloudio/uni-ui';
import interact from '../../servers/shop/interact.js';
export default {
	components: { uniIcons },
	data() {
		return {
			items: [
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				},
				{
					// url: 'http://www.didichuxing.com/',
					image: '/static/img/banner.png'
				}
			],
			initData:[],
			left: 0,
			isleft: 0,
		
			login: '',
		};
	},
	mounted() {	
	},
	onShow() {
		var _this = this;
		_this.login = uni.getStorageSync('login');
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '网络不给力，请检查您的网络',
						icon: 'none'
					})
					uni.onNetworkStatusChange(function(res) {
						
						if (res.isConnected) {
							if (_this.login) {
								_this.getData();
							}else{
								uni.navigateTo({
									url: '/pages/shop/account/login'
								});
							}
							
						} 
					});
				} else {
					if (_this.login) {
						_this.getData();
					}else{
						uni.navigateTo({
							url: '/pages/shop/account/login'
						});
					}
					
				}
			}
		});
		
		
		
		console.log(this.login)
		
	},
	onPullDownRefresh() {
		var _this=this;
	      uni.startPullDownRefresh({
	      	success() {
				_this.getData();
				setTimeout(function () {
					
				    uni.stopPullDownRefresh();
				}, 1000);
	      		
	      	}
	      })
	       
	    },
	methods: {
		getData(){
			interact.initData()
				.then(res => {
						this.initData = res.data.records.map(v => {
						v.image = this.imgCDNUrl + v.avator;
				
						
						if(v.img){
							for(var i=0;i<v.img.length;i++){
								v.img[i]=this.imgCDNUrl+v.img[i];
							}
						}
						return v;
					});
					console.log(this.initData);
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			
		},
		clickHandler(item, index) {
			console.log(item, index);
		},
		like(item) {	
			var _this=this;
				var obj=new Object()
				
				obj.flag=item.isPraise?0:1;
				obj.buyerShowId=item.id;
				interact.update(obj)
					.then(res => {
							var code=res.code
							console.log("请求结果："+code);
				            if(code==200){
								/* 修改颜色 */
								_this.getData();/* 刷新数据 */
								
							}
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
		},
		go_good(id){
				this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId',id);
		},
		go_detail(id){
			this.commonality.route_baling('/pages/shop/commodity/buyersShowdetails','shopbuyersShowdetails',id)
		},
		scroll(e) {
			this.isleft = e.detail.scrollLeft;
		},
		go_left() {
			var left = this.isleft - 180;
			this.$nextTick(function() {
				this.left = left;
			});
		},
		go_right() {
			var left = this.isleft + 180;
			this.$nextTick(function() {
				this.left = left;
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.buyersShow {
	.show {
		// position: absolute;
		// top: 80rpx;
		// bottom: 0;
		// width: 100%;
		padding: 20rpx 0;
		overflow: auto;
		.list {
			padding: 0 20rpx;
			.show_list {
				padding: 36rpx 20rpx 29rpx;
				box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
				border-radius: 10rpx;
				.msg {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					image {
						position: relative;
						width: 80rpx;
						height: 80rpx;
						top: 5rpx;
						border-radius: 50%;
						margin-right: 14rpx;
					}
					view {
						flex: 1;
						font-size: 28rpx;
						line-height: 48rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
				.img {
					position: relative;
					.scroll-X {
						white-space: nowrap;
						height: 300rpx;
						image {
							width: 200rpx;
							height: 300rpx;
							background: #efefef;
						}
					}
					.control {
						view {
							position: absolute;
							background: rgba(51, 51, 51, 0.5);
							padding: 26rpx 21rpx;
							color: #fff;
							font-size: 38rpx;
							top: 50%;
							transform: translate(0, -50%);
							z-index: 9;
						}
						.left {
							left: 0;
						}
						.right {
							right: 0;
						}
					}
					.imgthumb {
						width: 214rpx;
						display: inline-block;
						padding: 0 17rpx 0 0;
						image {
							width: 100%;
							display: block;
						}
					}
				}
				.like {
					
					padding-top: 29rpx;
					line-height: 34rpx;
					font-size: 32rpx;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.over{
						width: 600rpx;
						 white-space: nowrap;
						text-overflow:ellipsis;
						overflow: hidden;
					}
					image {
						position: relative;
						width: 37rpx;
						height: 34rpx;
						top: 5rpx;
					}
				}
			}
		}
	}
}
</style>
